<template>
  <div>
    <slot name="title">默认内容</slot>
    <p>{{ account }}</p>
    <button @click="handleClick">点我试试</button>
  </div>
</template>

<!-- 在组件创建之前、props被解析之后执行 -->
<script setup>
import { 
  defineProps, 
  useAttrs,
  useSlots,
  defineEmits
} from 'vue';

// 定义 props
const properties = defineProps({
   // prop 可以在模板中直接使用
   account: {
    type: String
   } 
});

console.log( properties );

// 获取在父组件中指定的 非prop 属性
const attributes = useAttrs();
console.log( attributes );

const slots = useSlots();
console.log( slots );
console.log( slots.title() );

// 声明自定义事件
const emit = defineEmits( ['暴击'] );

function handleClick(){
    // 触发自定义事件(在父组件中可以监听这些事件)
    emit( '暴击' , Math.floor( Math.random() * 100 ) );
}
</script>